<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>PlayStation fo Sony</title>
		<link href="./img/playstation.png" rel="icon" />
		<link href="./assets/vendor/animate.css/animate.min.css" rel="stylesheet" />
		<link href="./assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<link href="./assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet" />
		<link href="./assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet" />
		<link href="./assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet" />
		<link href="./assets/vendor/remixicon/remixicon.css" rel="stylesheet" />
		<link href="./assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" />
		<link href="./assets/css/style.css" rel="stylesheet" />

		<style>
			.header {
				top: 0;
				width: 100%;
				height: 36px;
				background-color: black;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}

			.header img {
				height: 100%;
			}

			.navbar {
				transition: top 0.3s;
				width: 100%;
				z-index: 1000;
			}

			.navbar.fixed {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
			}

			.navbar-nav {
				flex-direction: row;
			}

			.nav-item {
				padding: 0 10px;
			}

			.navbar-brand img {
				height: 100%;
			}

			.nav-right {
				display: flex;
				align-items: center;
				margin-left: auto;
			}

			.button {
				background-color: #0070cc;
				color: white;
				border: none;
				border-radius: 50px;
				height: 25px;
				padding: 0 20px;
				font-size: 16px;
				font-family: "Microsoft YaHei", sans-serif;
				font-weight: bold;
				cursor: pointer;
				transition: background-color 0.3s ease-in-out;
				margin-right: 10px;
				line-height: 25px;
			}

			.button:hover {
				background-color: #005499;
			}

			.fake-search-box {
				width: 105px;
				height: 30px;
				border: 2px solid #ccc;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 4px;
				cursor: pointer;
				transition: border-color 0.3s ease-in-out;
				position: relative;
			}

			.fake-search-box:hover {
				border-color: blue;
			}

			.hidden-div {
				background-color: #fff;
				border-radius: 12px;
				opacity: 0;
				transform: translateY(-20px);
				transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
				position: absolute;
				top: 0;
				left: -550px;
				width: 100%;
				height: 100%;
				z-index: 1;
				display: none;
			}

			.hidden-div.show {
				opacity: 1;
				transform: translateY(0);
				display: block;
			}

			.overlay {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				display: none;
				justify-content: center;
				align-items: center;
			}

			.overlay.show {
				display: flex;
			}

			.offcanvas-top {
				top: 100px !important;
			}

			.offcanvas-backdrop {
				background-color: transparent !important;
			}

			.image-container {
				position: absolute;
				top: 48%;
				left: 48%;
				transform: translate(-50%, -50%);
			}

			.image-container1 {
				position: absolute;
				top: 48%;
				left: 48%;
				transform: translate(-50%, -50%);
			}

			.image-link {
				display: inline-block;
			}

			.image-link img {
				transition: box-shadow 0.3s ease;
				border-radius: 7px;
			}

			.image-link:hover img {
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
			}

			.nav-link img {
				border-radius: 20px;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.296);
				background-color: white;
				padding: 5px;
			}

			.nav-pills .nav-link.active img {
				border: 3px solid blue;
				padding: 2px;
			}

			.nav-pills {
				--bs-nav-pills-link-active-bg: 0;
			}

			.nav-link {
				padding: 0 !important;
			}

			.nav-item {
				transition: transform 0.3s ease;
			}

			.nav-item:hover {
				transform: scale(1.1);
			}

			.black-background {
				width: 100%;
				height: 700px;
				background-color: #121314;
				margin-top: 80px;
				padding-top: 50px;
			}

			.container {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.row {
				display: flex;
				justify-content: center;
				margin: 10px 0;
			}
			.row img {
				width: 200px;
				height: 200px;
				margin: 5px;
				border-radius: 15px;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
				transition: transform 0.3s ease, box-shadow 0.3s ease;
			}
			.row img:hover {
				transform: scale(1.1);
				box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
			}
			.body-1 {
				justify-content: center;
				align-items: center;
				margin: 0;
			}
			.row > * {
				padding-left: 0 !important;
				padding-right: 0 !important;
			}
			.testimonials {
				background: url(./img/bodt-2/1.png);
			}
			.testimonials::before {
				content: none;
			}
			.testimonials .testimonial-item .testimonial-img {
				border-radius: 0;
				border: 0;
			}
			.img-399 {
				border-radius: 15px;
				margin: auto;
				display: block;
				max-width: 100%;
				max-height: 100%;
			}
			.footer {
				background-color: #00439c;
				color: #fff;

				padding: 42px 0;
				position: relative;
				bottom: 0;
				width: 100%;
				margin-top: auto;
			}
			.search-container {
				display: flex;
				align-items: center;
				width: 650px;
				height: 63px;
				border: 1px solid #ccc;
				border-radius: 5px;
				overflow: hidden;
			}
			.dropdown {
				width: 210px;
				height: 100%;
				border: none;
				outline: none;
				padding: 0 10px;
			}
			.dropdown option {
				width: 210px;
			}
			.divider {
				width: 1px;
				height: 100%;
				background-color: #ccc;
			}
			.search-input {
				flex-grow: 1;
				height: 100%;
				border: none;
				outline: none;
				padding: 0 10px;
			}
			.search-button {
				width: 63px;
				height: 63px;
				background-color: #0072ce;
				border: none;
				cursor: pointer;
			}
			.search-button img {
				width: 30px;
				height: 30px;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<span><img src="./img/logo-sony.png" alt="Sony Logo" /></span>
		</div>
		<nav class="navbar navbar-expand-lg navbar-light" style="background-color: white; height: 64px">
			<span class="navbar-brand"><img src="./img/logo-playstation.png" alt="" /></span>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarScroll">
				<ul class="navbar-nav mr-auto my-2 my-lg-0">
					<li class="nav-item">
						<a class="nav-link" href="#" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">游戏<img src="./img/arrow down.png" style="width: 20px; border-radius: 0 !important; box-shadow: none !important" /></a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop1" aria-controls="offcanvasTop">PS5<img src="./img/arrow down.png" style="width: 20px; border-radius: 0 !important; box-shadow: none !important" /></a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">PS4</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">服务</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">配件</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">最新消息</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">商店</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">支持</a>
					</li>
				</ul>
				<div class="nav-right">
					<a><button class="button">登录</button></a>
					<div class="fake-search-box" id="fakeSearchBox">
						搜索
						<img src="./img/sousuo.png" style="margin-left: 10px" />
						<div class="hidden-div" id="hiddenDiv">
							<div class="search-container">
								<select class="dropdown">
									<option value="option1">PlayStation Store</option>
									<option value="option2">PlayStation.com</option>
								</select>
								<div class="divider"></div>
								<input type="text" class="search-input" placeholder="搜索PS Store" />
								<button class="search-button">
									<img src="./img/sousuo (2).png" alt="Search" />
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</nav>
		<div class="overlay" id="overlay"></div>
		<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel" style="height: 148px">
			<div class="offcanvas-header">
				<h5 class="offcanvas-title" id="offcanvasTopLabel">
					<div class="image-container">
						<a class="image-link"><img src="./img/PS5.png" /></a>
						<a class="image-link"><img src="./img/PS4.png" /></a>
						<a class="image-link"><img src="./img/PS-VR2.png" /></a>
						<a class="image-link"><img src="./img/PC.png" /></a>
						<a class="image-link"><img src="./img/PS-Plus.png" /></a>
					</div>
				</h5>
			</div>
		</div>
		<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop1" aria-labelledby="offcanvasTopLabel" style="height: 148px">
			<div class="offcanvas-header">
				<h5 class="offcanvas-title" id="offcanvasTopLabel">
					<div class="image-container1">
						<a class="image-link" href="#"><img src="./img/zhuji.png" /></a>
						<a class="image-link" href="#"><img src="./img/yinxiang.png" /></a>
						<a class="image-link" href="#"><img src="./img/kongzhiqi.png" /></a>
						<a class="image-link" href="#"><img src="./img/PS-VR2.png" /></a>
						<a class="image-link" href="#"><img src="./img/yinxiang.png" /></a>
					</div>
				</h5>
			</div>
		</div>

		<div id="carouselExampleRide" class="carousel slide" data-bs-ride="true">
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="./img/lunbo/lunbo1.png" class="d-block w-100" style="height: 640px" />
				</div>
				<div class="carousel-item">
					<img src="./img/lunbo/lunbo2.png" class="d-block w-100" style="height: 640px" />
				</div>
				<div class="carousel-item">
					<img src="./img/lunbo/lunbo3.png" class="d-block w-100" style="height: 640px" />
				</div>
				<div class="carousel-item">
					<img src="./img/lunbo/lunbo4.png" class="d-block w-100" style="height: 640px" />
				</div>
				<div class="carousel-item">
					<img src="./img/lunbo/lunbo5.png" class="d-block w-100" style="height: 640px" />
				</div>
				<div class="carousel-item">
					<img src="./img/lunbo/lunbo6.png" class="d-block w-100" style="height: 640px" />
				</div>
				<div class="carousel-item">
					<img src="./img/lunbo/lunbo7.png" class="d-block w-100" style="height: 640px" />
				</div>
			</div>
			<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="prev">
				<img src="./img/left.png" alt="Previous" style="width: 50px" />
				<span class="visually-hidden">Previous</span>
			</button>
			<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next">
				<img src="./img/Right.png" alt="Next" style="width: 50px" />
				<span class="visually-hidden">Next</span>
			</button>
		</div>
		<div class="tab-content">
			<div class="tab-pane fade show active" id="PS5zhuji"><img src="./img/PS5zhuji1.png" style="height: 660px" /></div>
			<div class="tab-pane fade" id="DualSenseEdge"><img src="./img/DualSenseEdge1.png" style="height: 660px" /></div>
			<div class="tab-pane fade" id="DualSense"><img src="./img/DualSense1.png" style="height: 660px" /></div>
			<div class="tab-pane fade" id="PULSEElite"><img src="./img/PULSEElite1.png" style="height: 660px" /></div>
			<div class="tab-pane fade" id="PULSEExplore"><img src="./img/PULSEExplore1.png" style="height: 660px" /></div>
		</div>
		<ul class="nav nav-pills nav justify-content-center">
			<li class="nav-item">
				<a class="nav-link" data-toggle="tab" href="#PS5zhuji"><img src="./img/PS5zhuji.png" width="260px" /></a>
				<p style="text-align: center; color: black">PS5主机</p>
			</li>
			<li class="nav-item">
				<a class="nav-link" data-toggle="tab" href="#DualSenseEdge"><img src="./img/DualSenseEdge.png" width="260px" /></a>
				<p style="text-align: center; color: black">DualSense Edge</p>
			</li>
			<li class="nav-item">
				<a class="nav-link" data-toggle="tab" href="#DualSense"><img src="./img/DualSense.png" width="260px" /></a>
				<p style="text-align: center; color: black">DualSense™无线控制器</p>
			</li>
			<li class="nav-item">
				<a class="nav-link" data-toggle="tab" href="#PULSEElite"><img src="./img/PULSEElite.png" width="260px" /></a>
				<p style="text-align: center; color: black">Pulse Elite™无线耳机组</p>
			</li>
			<li class="nav-item">
				<a class="nav-link" data-toggle="tab" href="#PULSEExplore"><img src="./img/PULSEExplore.png" width="260px" /></a>
				<p style="text-align: center; color: black">PULSE Explore™无线耳塞式耳机</p>
			</li>
		</ul>
		<div class="body-1">
			<div class="black-background">
				<h2 style="text-align: center; color: white; font-weight: bold">已经推出和即将推出的精彩PS4和PS5游戏</h2>
				<img src="./img/按钮.png" style="margin: auto; display: block; max-width: 100%; max-height: 100%" />
				<div class="container">
					<div class="row">
						<img src="./img/body-1/RONIN.png" />
						<img src="./img/body-1/SPIDER-MAN2.png" />
						<img src="./img/body-1/Sklllu.png" />
						<img src="./img/body-1/FC24.png" />
						<img src="./img/body-1/Dragon`s-Dogma2.png" />
						<img src="./img/body-1/Helldivers™2.png" />
					</div>
					<div class="row">
						<img src="./img/body-1/God-of-War.png" />
						<img src="./img/body-1/The-Last-of-Us.png" />
						<img src="./img/body-1/FINAL-FANTASY-VII.png" />
						<img src="./img/body-1/Sea-of-Thieves.png" />
						<img src="./img/body-1/CALL-Of-DUTY.png" />
					</div>
				</div>
			</div>
		</div>
		<section id="testimonials" class="testimonials">
			<h1 style="text-align: center; font-weight: 300">探索PlayStation Puls</h1>
			<p style="color: #6c6c6c; text-align: center; font-weight: 700">游玩数百款超棒的PS5、PS4和经典PlayStation游戏，探索壮阔的冒险、独树一帜的独立游戏、最适合阖家同乐的游戏以及其他各式作品。</p>
			<div class="container position-relative">
				<div class="testimonials-slider swiper" data-aos="fade-up" data-aos-delay="100">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="testimonial-item">
								<img src="./img/bodt-2/1-1.png" class="img-399" />
							</div>
						</div>
						<div class="swiper-slide">
							<div class="testimonial-item">
								<img src="./img/bodt-2/1-2.png" style="border-radius: 15px" />
							</div>
						</div>
						<div class="swiper-slide">
							<div class="testimonial-item">
								<img src="./img/bodt-2/1-3.png" class="img-399" />
							</div>
						</div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>
		</section>
		<div><img src="./img/body-3.png" style="margin: auto; display: block; max-width: 100%; max-height: 100%; width: 1730px" /></div>
		<div><img src="./img/body-4.png" style="margin: auto; display: block; max-width: 100%; max-height: 100%; width: 1730px" /></div>
		<div class="footer">
			<img src="./img/yejiao/jiewei.png" style="margin-bottom: 8px; margin-left: 73px" />
			<p style="margin-left: 1330px">©Copyright 林文德. All Rights Reserved</p>
		</div>
		<script src="./assets/vendor/purecounter/purecounter_vanilla.js"></script>
		<script src="./assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
		<script src="./assets/vendor/glightbox/js/glightbox.min.js"></script>
		<script src="./assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
		<script src="./assets/vendor/swiper/swiper-bundle.min.js"></script>
		<script src="./assets/vendor/php-email-form/validate.js"></script>
		<script src="./assets/js/main.js"></script>
		<script src="./bookStore/bootstrap/js/jquery-3.5.1.slim.min.js"></script>
		<script src="./bookStore/bootstrap/js/bootstrap.min.js"></script>
	</body>
</html>
